import React, { useEffect, useState } from 'react';
import './index.css';
import { LeftOutlined } from '@ant-design/icons';
import { history } from 'umi';
import axios from 'axios';
import './index.css';

export default function index() {
  // 获取搜索表单内的内容
  const [searchcontent, setsearcchcontent] = useState('');
  // 获取数据
  const [data, setdata] = useState([]);
  // 获取搜索后的数据
  const [searchdata, setsearchdata] = useState([]);
  // 热门搜索是否显示隐藏
  const [hotflag, sethotflag] = useState(true);
  // 热门搜索数据
  const [hotdata, sethotdata] = useState([
    { id: 1, title: '垃圾袋' },
    { id: 2, title: '冰箱' },
    { id: 3, title: '垃圾桶' },
    { id: 4, title: '电视' },
    { id: 5, title: '水盆' },
    { id: 6, title: '空调被' },
    { id: 7, title: '风扇' },
    { id: 8, title: '漱口杯' },
  ]);

  const [history, sethistory] = useState([
    { id: 1, title: '222' },
    { id: 2, title: '222222999999' },
  ]);

  // 点击搜索显示搜索结果
  const [flag, setflag] = useState(false);

  // 搜索按钮
  const searchbtn = () => {
    setflag(true);
    const copyhistory = [...history, { id: Date.now(), title: searchcontent }];
    sethistory(copyhistory);
    const copydata = data.filter((item) => item.title.includes(searchcontent));
    setsearchdata(copydata);
  };

  // 获取数据
  const getdata = async () => {
    let { data } = await axios.get('http://localhost:3000/yrt/datalist');
    setdata(data.data);
  };

  // 返回页面
  const goback = () => {
    setflag(false);
    setsearcchcontent('');
  };

  // 热门搜索
  const hotsearch = (content) => {
    setflag(true);
    const copyhistory = [...history, { id: Date.now(), title: content }];
    sethistory(copyhistory);
    setsearcchcontent(content);
    const copydata = data.filter((item) => item.title.includes(content));
    setsearchdata(copydata);
  };

  // 隐藏热门搜索
  const yin = () => {
    sethotflag(false);
  };

  // 显示热门搜索
  const xian = () => {
    sethotflag(true);
  };

  const xiang = (obj) => {
    setgetlist(obj);
    history.push({ pathname: '/duixihuan', state: { ...obj } });
  };

  useEffect(() => {
    getdata();
  }, []);
  return (
    <div id="app">
      {/* 头部导航栏 */}
      <div className="top">
        <div className="top-box1">
          <LeftOutlined onClick={() => goback()} />
        </div>
        <div className="top-box2">
          <div className="top-box21">
            <input
              type="text"
              placeholder="奶茶"
              value={searchcontent}
              onChange={(ev) => setsearcchcontent(ev.target.value)}
              style={{ paddingLeft: '15px' }}
            />
          </div>
          <div className="top-box22" onClick={() => searchbtn()}>
            搜索
          </div>
        </div>
      </div>
      {flag ? (
        ''
      ) : (
        <div>
          {/* 历史搜索 */}
          <div className="history">
            <div className="history-top">
              <div className="history-top1">
                <h3>历史搜索</h3>
              </div>
              <div className="history-top2">回收站</div>
            </div>
            <div className="his">
              {history.map((item) => (
                <div className="name" key={item.id}>
                  {item.title}
                </div>
              ))}
            </div>
          </div>
          {/* 热门搜索 */}
          <div className="history">
            <div className="history-top">
              <div className="history-top1">
                <h3>热门搜索</h3>
              </div>
              {hotflag ? (
                <div className="history-top2" onClick={() => yin()}>
                  隐藏
                </div>
              ) : (
                <div className="history-top2" onClick={() => xian()}>
                  显示
                </div>
              )}
            </div>
            {hotflag ? (
              <div className="his">
                {hotdata.map((item) => (
                  <div
                    className="hotdata"
                    key={item.id}
                    onClick={() => hotsearch(item.title)}
                  >
                    {item.title}
                  </div>
                ))}
              </div>
            ) : (
              <div style={{ textAlign: 'center', color: 'rgb(43, 205, 221)' }}>
                当前搜索发现已隐藏~
              </div>
            )}
          </div>
        </div>
      )}
      {/* 搜索内容 */}
      {flag ? (
        <div className="history">
          <div className="history-top">
            <div className="history-top1">
              <h3>可兑换商品</h3>
            </div>
          </div>
          <div className="his">
            {searchdata.map((item) => (
              <div className="shop" key={item._id} onClick={() => xiang(item)}>
                <div className="shop1">
                  <img src={item.img} alt="" />
                </div>
                <div className="shop2">
                  <div style={{ marginTop: '20px' }}>
                    <h3>{item.title}</h3>
                  </div>
                  <div>{item.jinbi}币</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      ) : (
        ''
      )}
    </div>
  );
}
